<template>
  <div class="bgff p20" style="min-height:100%;box-sizing:border-box;">
    <el-form
      :model="form"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
      style="width:500px;"
    >
      <el-form-item label="公司名字">
        <el-input v-model="form.company" :disabled="!isEdit" placeholder="公司名字" maxlength="20"></el-input>
      </el-form-item>
      <el-form-item label="版本号">
        <el-input v-model="form.version" :disabled="!isEdit" placeholder="版本号" maxlength="20"></el-input>
      </el-form-item>
      <el-form-item label="版权">
        <el-input v-model="form.copy" :disabled="!isEdit" placeholder="版权" maxlength="100"></el-input>
      </el-form-item>
      <el-form-item label="客服号码">
        <el-input v-model="form.phone" :disabled="!isEdit" placeholder="客服号码" maxlength="20"></el-input>
      </el-form-item>
      <el-form-item label="公司logo">
        <el-upload
          class="avatar-uploader"
          :action="image_url"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <div class="imgbox">
            <img v-if="form.logo" :src="form.logo" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </div>
        </el-upload>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="large" @click="editInfo">{{!isEdit?'修改信息':'保存信息'}}</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import uploadurl from "@/http/uploadconfig";
import { _xiaochengxuGET, _xiaochengxuPOST } from "@/http/ajax";
export default {
  data() {
    return {
      image_url: uploadurl.image_url,
      form: {
        company: "",
        logo: "",
        version: "",
        copy: "",
        phone: ""
      },
      isEdit: false
    };
  },
  created() {
    this.getData();
  },
  methods: {
    editPassword() {
      const _this = this.$refs.password_;
      _this.dialog = true;
    },
    editInfo() {
      if (this.isEdit) {
        let data = {
          copy:this.form.copy,
          company: this.form.company,
          logo: this.form.logo,
          version: this.form.version,
          phone: this.form.phone
        };
        _xiaochengxuPOST(
          data,
          res => {
            this.$notify({
              title: "操作成功",
              duration: 2000
            });
            this.isEdit = !this.isEdit;
            this.getData();
          },
          err => {}
        );
      } else {
        this.isEdit = !this.isEdit;
      }
    },
    getData() {
      let id = JSON.parse(sessionStorage.user).id || 0;
      _xiaochengxuGET(
        id,
        res => {
          this.form = res;
        },
        err => {}
      );
    },
    handleAvatarSuccess(res, file) {
      let data = {
        logo: res.data[0],
        company: this.form.company,
        version: this.form.version,
        copy: this.form.copy,
        phone: this.form.phone
      };
      _xiaochengxuPOST(
        data,
        res => {
          this.$notify({
            title: "操作成功",
            duration: 2000
          });
          this.getData();
        },
        err => {}
      );
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;
      // if (!isJPG) {
      //   this.$message.error("上传头像图片只能是 JPG 格式!");
      // }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isLt2M;
    }
  }
};
</script>

<style scoped lang="scss">
.imgbox {
  width: 60px;
  height: 60px;
  position: relative;
  img {
    width: 100%;
    height: 100%;
    border-radius: 100px;
    overflow: hidden;
  }
  &:after {
    position: absolute;
    content: "";
    background: url(http://img3.zugiot.cn/1565337968851_wx17aa476b91c2a391.o6zAJs3b6tdnxGVzjkF4tM0s0yjc.XIvxMM6vCSwp22c9671c671d1126f4fa605974a7b698.png)
      no-repeat;
    width: 23px;
    height: 23px;
    bottom: 0;
    right: 0;
    background-size: 100% 100%;
  }
}
</style>
